<template>
    <div id="app">
        <DrawCard></DrawCard>
        <img src="https://cdn.opapp.cn/legoCard/cloud-1.png" class="cloud1">
        <img src="https://cdn.opapp.cn/legoCard/cloud-2.png" class="cloud2">
        <img src="https://cdn.opapp.cn/legoCard/cloud-3.png" class="cloud3">
        <img src="https://cdn.opapp.cn/legoCard/cloud-4.png" class="cloud4">
        <img src="https://cdn.opapp.cn/legoCard/logo.png" class="logo">

    </div>
</template>

<script>
    import DrawCard from './components/DrawCard'

    export default {
        name: 'App',
        components: {
            DrawCard,
        },
    }
</script>

<style>
    html,body{
        height: 100%;
        width: 100%;
        overflow: hidden;
        background-color: #cde3ba;

    }

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        height: 100%;
        overflow: hidden;
    }
    .logo{
        position: absolute;
        width: 200px;
        height: 200px;
        left: 30px;
        top: 40px;
    }


    @media only screen and (max-width: 2880px) and (min-width: 1600px){
        html{
            font-size: 36px;
        }
        .cloud1{
            width: 900px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .cloud2{
            width: 1200px;
            position: absolute;
            right: 0;
            top: 0;
        }
        .cloud3{
            width: 1200px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .cloud4{
            width: 1400px;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    }
    @media only screen and (max-width: 1600px) and (min-width: 1280px){
        html{
            font-size: 28px;
        }
        .cloud1{
            width: 800px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .cloud2{
            width: 1100px;
            position: absolute;
            right: 0;
            top: 0;
        }
        .cloud3{
            width: 1100px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .cloud4{
            width: 1300px;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    }
    @media only screen and (max-width: 1280px) and (min-width: 960px){
        html{
            font-size: 20px;
        }
        .cloud1{
            width: 700px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .cloud2{
            width: 1000px;
            position: absolute;
            right: 0;
            top: 0;
        }
        .cloud3{
            width: 1000px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .cloud4{
            width: 1200px;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    }
    @media only screen and (max-width: 960px){
        html{
            font-size: 12px;
        }
        .cloud1{
            width: 500px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .cloud2{
            width: 750px;
            position: absolute;
            right: 0;
            top: 0;
        }
        .cloud3{
            width: 750px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .cloud4{
            width: 900px;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    }
</style>
